<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jqpaginator.min.js"></script>
</head>
<body>
<table class="table table-hover table-bordered ">
    <thead>
    <tr class="success">
        <td>编号</td>
        <td>区/县名</td>
        <td>county_id</td>
        <td>city_id</td>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<!-- 第一步：定义容器，存放分页条 -->
<div class="footer">
    <ul class="pagination" id="pagination0"></ul>
</div>

<script>
    $(function () {
        //第二步：初始化分页条
        $.jqPaginator('#pagination0', {//这个选择器是容器的ID，必须和第一步的ID对应
            totalCounts:1000, //总记录数是1,先写死
            pageSize:10,//每页显示10条记录
            visiblePages: 5,//分页条显示10个页码
            currentPage: 1,//默认是第一页
            first:'<li class="first"><a href="javascript:;">首页</a></li>',
            last:'<li class="first"><a href="javascript:;">尾页</a></li>',
            prev : '<li class="prev"><a href="javascript:;">上页</a></li>',
            next : '<li class="next"><a href="javascript:;">下页</a></li>',
            page : '<li class="page"><a href="javascript:;">{{page}}</a></li>',
            onPageChange: function (currentPage) {//num表示被点击的那个页码

                //第三步：对接真实数据，总记录数对接
                console.log("当前正在访问第"+currentPage+"页的数据");

                //获取当前页面要显示的数据
                $.get('/countyServlet/findAll',{
                    pageNum:currentPage,
                    pageSize:10
                },function (data) {
                    //总记录数对接真实数据
                    try{
                        $('#pagination0').jqPaginator('option', {
                                totalCounts: data.total
                            }
                        );
                    }catch (e) {
                        e.error();
                    }

                    //第四步：将查询到的数据拼接成很多tr
                    let tr = '';
                    $(data.list).each(function (index,element) {
                        tr += `
                            <tr>
                                <td>${index+1}</td>
                                <td>${element.name}</td>
                                <td>${element.countyId}</td>
                                <td>${element.cityId}</td>
                            </tr>
                        `;
                    });
                    //覆盖tbody中的中内容
                    $("tbody").html(tr);
                });
            }
        });
    });
</script>
</body>
</html>